<template>
  <div class="tag-items">
    <van-nav-bar
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
      placeholder
      :border="false"
    />
    <van-tabs class="tags" v-model="selectTag" type="card" sticky offset-top="46">
      <van-tab :title="tag.t" :name="tag.i" v-for="(tag, index) in tags" v-bind:key="index">
        <recommend-list :materialId="tag.i"/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import RecommendList from "@/views/home/components/RecommendList.vue";
import { NavBar, Tab, Tabs } from "vant";
export default {
  name: "TagItems",
  components: {
    RecommendList,
    [NavBar.name]: NavBar,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data() {
    return {
      tags: [],
      title: "",
      selectTag: ""
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (to.params.d && to.params.t) {
        console.log("重新加载")
        vm.tags = to.params.d;
        vm.title = to.params.t;
        vm.selectTag = "";
      }
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.tags >>> .van-tabs__nav--card {
  border: none;
}

.tags >>> .van-tabs__wrap,
.tags >>> .van-tab,
.tags >>> .van-tabs__nav,
.tag-items >>> .van-nav-bar {
  background-color: #ff3030;
}

.tag-items >>> .van-nav-bar .van-icon,
.tag-items >>> .van-nav-bar__text,
.tag-items >>> .van-nav-bar__title {
  color: #fff;
}

.tags >>> .van-tab {
  border: none;
  color: white;
  background-color: transparent;
}

.tags >>> .van-tab.van-tab--active {
  background-color: white;
  color: #ff3030;
  border-radius: 15px;
}

.tags >>> .van-tabs__wrap {
  height: 46px;
}
.tags >>> .van-tabs__nav {
  margin: 8px 16px;
}

.tags >>> .items {
  margin: 10px;
}

.tags {
  background-color: #eee;
}
</style>